<!--
 * @Description: 
 * @Author: HYH
 * @LastEditors: HYH
 * @LastEditTime: 2023-06-14 16:20:31
-->
<template>
  <div class="">
    <div class="flex flex-wrap justify-between">
      <Card
        v-for="(item, index) in pages"
        :title="item.name"
        :key="index"
        class="mx-5 my-5 hover:scale-[1.07] transition-all w-[45%] cursor-pointer"
      >
        <template #content>
          <div>访问{{ item.name }}页面</div>
        </template>
        <template #button>
          <a class="btn btn-block" target="_blank" @click="visit(item.name)">访问</a>
        </template>
      </Card>
      <!-- 添加项目 -->
      <Card title="添加项目" class="mx-5 my-5 w-[45%] cursor-pointer">
        <template #content>
          <div>添加项目/页面</div>
        </template>
        <template #button>
          <button class="btn btn-block" @click="showModal = true">添加项目</button>
        </template>
      </Card>
    </div>
    <el-dialog v-model="showModal" width="400" center>
      <el-form :model="form" label-width="80px">
        <el-form-item label="项目名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="项目图标">
          <el-input v-model="form.name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span >
          <el-button @click="showModal = false">取 消</el-button>
          <el-button type="primary" @click="showModal = false"> 确 认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import pages from '@/pages.json'
import { http } from '@/http/index'
import Card from '@/components/daisyUI/card.vue'
import Modal from '@/components/daisyUI/modal.vue'
const showModal = ref(false)
// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
})
const visit = (page: string) => {
  window.open(`html/${page}.html`, '_blank')
  localStorage.setItem('page', page)
}
</script>
<style lang="scss" scoped></style>
